<template>
	<div>
		<ul>
			<li>当前共有{{ num }}</li>
			<li v-for="(item, index) in tdict" :key="index">
				{{ item.name }}
			</li>
		</ul>

		<!-- 测试watch的特性 -->
		<button @click="change">增加一个</button>
		<button @click="change">删除一个</button>
	</div>
</template>

<script>
export default {
	props: ['dict'],
	methods: {
		change() {
			// vue2.6.11 watch不在有重复执行问题
			this.tdict[0].name = 2020
		},
	},
	data() {
		return {
			num: 0,
			tdict: [],
		}
	},
	watch: {
		tdict: {
			deep: true,
			handler(value) {
				this.num = value.length
				console.log(value)
			},
		},

		dict: {
			deep: true,
			handler(data) {
				// 把数组类型转成对象
				this.tdict = data.map((item) => {
					return Object.fromEntries([item])
				})
			},
			// 第一次默认执行
			immediate: true,
		},
	},
}
</script>